<template>
    <div class="Searchpopup">
        <div class="serach">
            <form action="/">   
                <van-search v-model="SerVal" show-action :placeholder="placeholder" @search="onSearch"
                    @cancel="onCancel" @input="onInput" />
            </form>
        </div>
        <History v-if="blockShow==1" @hosClick="hosClick" @tagClick="tagClick" :history="historytxt" :hottxt="hottxt">
        </History>
        <RealSer v-if="blockShow==2" @searchtxt="searchtxt" :searchList="searchList"></RealSer>
        <Drop v-if="blockShow==3" @categorychange="categorychange" @Pricechange="Pricechange" :pruductList="pruductList"
            :classify="classify">
        </Drop>
    </div>
</template>

<script>
    import History from "../components/HistoryHot"
    import RealSer from "../components/RealSearch"
    import Drop from "../components/DropDown"
    import { getPopub, getHelper, getProduct } from "../api/api"
    export default {
        name: 'YxSearchpopup',
        components: { History, RealSer, Drop },
        data() {
            return {
                SerVal: "",
                // 默认文本
                placeholder: "",
                // blockShow 
                //1 历史记录 热门搜索
                //2 搜索提升列表
                //3 搜索产品的内容
                blockShow: 1,
                //历史记录
                historytxt: [],
                // 热门搜索
                hottxt: [],
                // 搜索时列表
                searchList: [],
                // 产品列表
                pruductList: [],
                // 产品分页
                classify: [],
                // 请求的默认参数
                // 价格排序（由高到低或falese）
                order: "desc",
                //分类id
                categoryId: 0,
                // 默认的搜索方式 是id 还是price
                sort: "id"
            };
        },
        mounted() {
          
        },
        created() {
            getPopub().then((res) => {
                this.placeholder = res.data.defaultKeyword.keyword;
                this.historytxt = res.data.historyKeywordList;
                this.hottxt = res.data.hotKeywordList
            }).catch((err) => {
                console.log(err)
            })
        },
        methods: {
            searchtxt(value){
                this.SerVal = value
                this.onSearch(value)
            },
            hosClick(value) {
                this.SerVal = value.keyword
                this.onSearch(value.keyword)
            },
            tagClick(value) {
                this.SerVal = value
                this.onSearch(value)
            },
            Pricechange(value) {
                this.order = value,
                    this.sort = "price"
                this.onSearch(this.SerVal)
            },
            onSearch(val) {
                this.blockShow = 3;
                getProduct({
                    keyword: val,
                    page: 1,
                    size: 10,
                    order: this.order,
                    categoryId: this.categoryId,
                    sort: this.sort
                }).then((res) => {
                    this.pruductList = res.data
                    this.classify = res.data.filterCategory
                    // 因为使用vantui  option2里面的属性不能改变 所以我们把拿请求的数据属性改变
                    this.classify = JSON.parse(JSON.stringify(this.classify).replace(/name/g, 'text').replace(/id/g, 'value'))
                }).catch((err) => {
                    console.log(err)
                })
            },
            onCancel() {
                this.$router.go(-1)
            },
            // 当input发生改变的时候
            onInput(val) {
                this.blockShow = 2;
                getHelper({ keyword: val }).then((res) => {
                    this.searchList = res.data;

                }).catch((err) => {
                    console.log(err)
                })
            },
            categorychange(value) {
                this.categoryId = value
                this.onSearch(this.SerVal)
            }
        },
    };
</script>

<style lang="scss" scoped>
 
    .Searchpopup {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        background-color: #fff;

        .serach {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;

            .van-cell {
                width: 5.8rem;
            }

            a {

                margin-right: 0.3rem;
            }
        }
    }

</style>
